{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山城重庆 - 注册</title>
    <link rel="stylesheet" href="{% static 'css/public.css' %}">
    <link rel="stylesheet" href="{% static 'css/zhuce.css' %}">
    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>

    <script>
        $(document).ready(function() {
            $('#register-form').on('submit', function(event) {
                event.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: '/zhuce',
                    data: $(this).serialize(),
                    success: function(response) {
                        // 注册成功的处理逻辑
                        if (response.success) {
                            var result=confirm("注册成功->跳转登录页")
                            if(result){
                                window.location.href = '/denglu';
                            }
                        } else {
                             $('#error_message').empty()
                             $.each(response.message, function(index, value) {
                                $('#error_message').append('<p>*' + value + '</p>');
                              });
                           
                        }
                    },
                    error: function(response) {
                        alert('Error occurred while registering.');
                        console.log(response.responseText);
                    }
                });
            });
        });
    </script>
</head>

<body>
    <header>
        <div class="top">
            <h1><a href="index">美丽家乡之重庆</a></h1>
            <nav>
                <ul>
                    <li><a href="index">首页</a></li>
                    <li><a href="jianjie">重庆简介</a></li>
                    <li><a href="wenhua">历史文化</a></li>
                    <li><a href="meishi">美食特色</a></li>
                    <li><a href="gonglve">旅游攻略</a></li>
                    <li><a href="denglu">登录/注册</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="register-container">
        <h2 class="register-title">山城重庆 - 注册</h2>
        <form method="post" id="register-form">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password1" name="password1" required>
            </div>
            <div class="form-group">
                <label for="confirmPassword">确认密码</label>
                <input type="password" id="password2" name="password2" required>
            </div>
            <span id="error_message" style="color:red"></span>
            <button type="submit" class="register-button">注册</button>
        </form>
        <div class="login-link">
            已有账号?<a href="denglu">点此登录</a>
        </div>
    </div>
    <footer>
        <p>&copy; 2024 美丽家乡之重庆 王敏 唐园园 王嘉钰 版权所有</p>
    </footer>
</body>
</html>